<template>
	<div class="navs">
		<div class="box">
			<img class="img" src="../assets/img/a2.png" alt="">
			<div>金融广场红鑫驿站党建云平台</div>
		</div>
		<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm">
			<div class="title">一用户登录一</div>
			<el-form-item prop="name" class="boxes">
				<img class="icon" src="../assets/img/a3.png" alt="">
				<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			
			<el-form-item prop="password" class="boxes">
				<img class="icon" src="../assets/img/a4.png" alt="">
				<el-input type="password" v-model="ruleForm.password"></el-input>
			</el-form-item>

			<el-form-item><el-button style="width: 100%;" type="danger" round @click="submitForm('ruleForm')">立即登录</el-button></el-form-item>
		</el-form>
	</div>
</template>

<script>
import { getCallCount,loginByPwd } from '../network/api';
export default {
	name: 'login',
	data() {
		var checkPhone = (rule, value, callback) => {
			let myreg = /^1[3456789]\d{9}$/;
			if (!myreg.test(value)) {
				callback(new Error('请输入正确手机号码'));
			} else {
				callback();
			}
		};
		return {
			layer: '',
			ruleForm: {
				name: '',
				password: ''
			},
			rules: {
				// phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
				name: [{ required: true, message: '请输入账号', trigger: 'blur' }, { min: 1, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 1, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }]
			}
		};
	},
	components: {},
	mounted() {},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 登录
					let param = {
						account:this.ruleForm.name,
						password:this.ruleForm.password
					}
					loginByPwd(param).then(res=>{
						// console.log(res)
						localStorage.setItem('token',res.retData.token)
						localStorage.setItem('userid',res.retData.userId)
						this.$router.push({path:'/index/news'})
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.navs{
		background: url('../assets/img/a1.png') no-repeat center;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
	}
	
	.box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding:144px 0;
		color: #CB1C1D;
		font-weight:800;
		font-size:60px;
	}
	.img{
		width: 100px;
		height: 100px;
		margin-right: 30px;
	}
	.el-form{
		width: 420px;
		height: 360px;
		background: #FFFFFF;
		position: absolute;
		top: 58%;
		left: 50%;
		transform: translate(-50%,-50%);
		white-space: nowrap;
		padding: 30px 60px;
		border-radius:10px;
	}
	.title{
		font-weight: 700;
		margin: 20px 0;
	}
	.boxes{
		position: relative;
		border-radius: 35px;
		padding:10px 0;
	}
	.icon{
		width: 30px;
		height: 30px;
		position: absolute;
		left: 15px;
		z-index: 22;
		top: 5px;
	}
	
	// 修改输入框样式
	/deep/.el-input__inner{
		border-radius: 35px;
		padding:0 50px;
	}

</style>
